<%@include file="startUpIncludes.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Calendar</title>
	<link rel='stylesheet' type='text/css' href='../css/jquery-ui.css' />
	<link rel='stylesheet' type='text/css' href='../css/theme.css' />
	<link rel='stylesheet' type='text/css' href='../css/fullcalendar.css' />
	<script type="text/javascript" src="../js/modalwin.js"></script>
	<script type="text/javascript" src="../js/chatter.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.23.custom.min.js"></script>
	<script type="text/javascript" src="../js/fullcalendar.min.js"></script>
	
<script type="text/javascript" src="../js/jquery.qtip-1.0.0-rc3.min.js"></script> 
	<script type='text/javascript'>
	$(document).ready(function() {
	///	alert("sdddddddddddddddd");
		///

	    var calendar = $('#calendar').fullCalendar({
	    	theme:true,
	        header: {
	            left: 'prev,next today',
	            center: 'title',
	            right: 'month,agendaWeek,agendaDay'
	        },
/* 	        selectable: true,
	        selectHelper: true, */
	        events: [
						${jsonEvents}
	 		    ]
			,
			eventRender: function(calEvent, element) {
				var tipContent = "<strong>" +
				$.fullCalendar.formatDate(calEvent.start,$.fullCalendar.formatDate(calEvent.start, 'h:mmt')) + " - " +
				$.fullCalendar.formatDate(calEvent.end,$.fullCalendar.formatDate(calEvent.end, 'h:mmt')) + "</strong><br/>" +calEvent.tooltip;
					if (typeof calEvent.location != 'undefined') {
						tipContent +=  '<br/>' + calEvent.title;
					}
					if (typeof calEvent.description != 'undefined') {
						tipContent +=  '<br/>' + calEvent.description;
					}
					$(element).qtip({
						content: tipContent,
						position: {
							corner: {
								target: 'bottomMiddle',
								tooltip: 'topMiddle'
							}
							
						},
						border: {
							radius: 4,
							width: 3
						},
						style: {
							name: 'light',
							tip: 'topMiddle',
							width: 400 ,
							textAlign: 'center',
							'font-size': 12
						}
					});
			}
	        //editable: true,
	    });
	});
	</script>
	<style>
		.callcustom,
		.callcustom div,
		.callcustom span {
		    background-color: rgb(134, 168, 0); /* background color */
		    border-color: black;     /* border color */
 		    color: black;           /* text color */ 
		}
		.appointmentcustom,
		.appointmentcustom div,
		.appointmentcustom span {
		    background-color: rgb(226, 109, 0); /* background color */
		    border-color: black;     /* border color */
 		    color: black;           /* text color */ 
		}
	</style>
</head>
	<body>
		<jsp:include page="header.jsp" >
			<jsp:param value="true" name="loggedIn"/>
		</jsp:include>
		<div class="wrap">
			<div class="fitBG">
				<div class="main">
					<jsp:include page="chatterLeftMenu.jsp" >
						<jsp:param value="people" name="currentPage"/>
					</jsp:include>
					<div class="content">
						<jsp:include page="tabs.jsp" >
					<jsp:param value="chatter" name="currentPage"/>
					</jsp:include>
						<div class="tab-content">
						<div class="calenar-content">
						<h4 class="">Calendar</h4>
		
		<div id='calendar'></div>
		</div>
		</div>
		</div>
		</div>
		
		<%@include file="footer.jspf" %>
		</div>
		</div>
	
	
	</body>
</html>

